<template>
	<view class="uni-flex uni-column layoutBg">
		<text class="title">账号注册</text>

		<view class="phone uni-flex uni-row">
			<view class="etLabel">
				+86
			</view>
			<input class="et" placeholder="请输入手机号" v-model="account"/>
		</view>

		<view class="phone uni-flex uni-row">
			<view class="etLabel">
				验证码
			</view>
			<input class="et" placeholder="请输入验证码" v-model="code"/>
			<u-button :disabled="codeDisAbeld" @click="sendCode" class="btn-custom" shape="circle" :hair-line="false">{{codeText}}</u-button>
		</view>
		
		<view class="phone uni-flex uni-row">
			<view class="etLabel">
				密码
			</view>
			<input class="et" placeholder="请输入密码" v-model="password" password/>
		</view>
		
		<view class="phone uni-flex uni-row">
			<view class="etLabel">
				邀请码
			</view>
			<input class="et" placeholder="请输入邀请码" v-model="inviteCode"/>
		</view>

		<view class="btn-login" @click="onRegister">立即注册</view>

		<view class="uni-flex uni-row uni-common-mt privacyView">
			<u-checkbox-group class="privacyNo">
				<u-checkbox v-model="checked" shape="circle">阅读并同意</u-checkbox>
			</u-checkbox-group>
			<text class="privacy" @click="onAgreement">《用户协议》</text>
			<text class="privacyNo"> 和 </text>
			<text class="privacy" @click="onPrivacy">《隐私政策》</text>
		</view>

	</view>
</template>

<script>
	import md5 from '@/utils/md5.js';
	
	export default {
		data() {
			return {
				codeDisAbeld: false,
				codeText: '获取验证码',
				checked: false,
				account: '',
				code: '',
				password: '',
				inviteCode: '',
			}
		},
		methods: {
			async sendCode(){
				let param = {loginname: this.account};
				let res = await this.$common.post('/app/zhuce/sendCode', param)
				if (0 == res.code){
					this.countdown();
					uni.showToast({
						title: '短信已发送',
						duration: 1000,
						icon: 'none'
					});
				} else {
					uni.showToast({
						title: res.msg,
						duration: 1000,
						icon: 'none'
					});
				}
			},
			countdown(){
				let seconds = 60;
				this.codeDisAbeld = true;
				let timer = setInterval(() => {
				  seconds--;
				  this.codeText= seconds + 's';
				  if (seconds === 0) {
				    clearInterval(timer);
					this.codeText= '获取验证码';
					this.codeDisAbeld = false;
				  }
				}, 1000);
			},
			
			async onRegister(){
				if(!this.checked){
					uni.showToast({
						title: "请勾选隐私政策"
					});
					return
				}
				let param = {
					loginname: this.account,
					code: this.code,
					password: md5.hex_md5(this.password),
					loginType: '2',
					invitationcode: this.inviteCode,
				};
				
				let res = await this.$common.post('/app/login/login', param);
				if(0 == res.code){
					this.saveCache(res);
					if (res.data.user.iswanshan == 2) {
						uni.navigateTo({
							url:'/pages/register/register-info',
							fail:(error)=>{
								uni.showToast({
									title:JSON.stringify(error),
									icon:'none'
								})
							}
						})				
					} else {
						uni.setStorageSync('login', true);
						uni.switchTab({
							// url:'/pages/tab/home/home',
							url:'/pages/tab/game/game',
							fail:(error)=>{
								uni.showToast({
									title:JSON.stringify(error),
									icon:'none'
								})
							}
						})
					}	
				}else{
					uni.showToast({
						title:res.msg,
						icon:'none'
					})
				}
			},
			
			onAgreement(){
				getApp().globalData.webUrl = "https://www.xksndf2002.cn/agreement.html";
				uni.navigateTo({
					url: '/pages/web/web'
				})
			},
			onPrivacy(){
				getApp().globalData.webUrl = "https://www.xksndf2002.cn/privacy.html";
				uni.navigateTo({
					url: '/pages/web/web'
				})
			},
			saveCache(res){
				uni.setStorageSync('token', res.data.token);
				uni.setStorageSync('userId', res.data.user.id);
				uni.setStorageSync('userName', res.data.user.nick);
				uni.setStorageSync('userPic', res.data.user.pic);
				uni.setStorageSync('userSex', res.data.user.sex);
				uni.setStorageSync('userTxCode', res.data.user.tengxuncode);
				//初始化IM
				getApp().loginIM();
			}

		}
	}
</script>

<style lang="scss">
	.layoutBg {
		box-sizing: border-box;
		background-color: #f5f5f5;
		width: 100%;
		height: 100vh;
		padding-left: 50rpx;
		padding-right: 50rpx;
	}

	.title {
		color: #222;
		font-weight: bold;
		font-size: 50rpx;
		margin-top: 200rpx;
	}

	.phone {
		background-color: #ededed;
		border-radius: 10rpx;
		width: 100%;
		height: 90rpx;
		margin-top: 30rpx;
		align-items: center;
		.etLabel {
			width: 150rpx;
			height: 90rpx;
			line-height: 90rpx;
			font-size: 36rpx;
			color: #222;
			text-align: center;
		}
		
		.et {
			height: 100rpx;
			padding-right: 20rpx;
			padding-left: 20rpx;
			line-height: 100rpx;
			font-size: 28rpx;
			flex: 1;
		}
		
		.btn-custom{
			background-image: linear-gradient(to right, #9fe9ff, #ab7aff);
			border-radius: 50rpx;
			width: 200rpx;
			height: 100%;
			line-height: 100%;
			text-align: center;
			color:white;
		}
		
	}

	
	.spaceBetween {
		justify-content: space-between;
	}

	.textButton {
		height: 50rpx;
		line-height: 50rpx;
		padding: 20rpx 20rpx;
		color: #666;
		font-size: 30rpx;
	}

	.privacy {
		font-size: 30rpx;
		color: #ab7aff;
	}

	.privacyNo {
		font-size: 30rpx;
		color: #666;
	}

	.privacyView {
		align-items: center;
	}
	
	.btn-login{
		margin-top: 100rpx;
		box-sizing: border-box;
		background-image: linear-gradient(to right, #9fe9ff, #ab7aff);
		border-radius: 40rpx;
		width: 100wh;
		height: 80rpx;
		line-height: 80rpx;
		text-align: center;
		color:white;
	}
</style>